<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'Mapview',
  data() {
    return {
      //map:null,
    }
  },
  props: {
    zoom: {
      type: Number,
      default: 13,
    },
    center: {
      type: [Array, String],
      default() {
        return [120.432652, 36.145987] //[120.432144, 36.147497]
      },
    },
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let that = this
      AMapLoader.load({
        key: 'e305cc0e3dd516846c01c6373e78da50', //设置您的key
        version: '2.0',
        plugins: ['AMap.PlaceSearch', 'AMap.DistrictSearch', 'AMap.Scale', 'AMap.HawkEye', 'AMap.ToolBar', 'AMap.ControlBar', 'AMap.Polyline', 'AMap.TileLayer'],
        AMapUI: {
          version: '1.1',
          plugins: ['misc/PathSimplifier'],
        },
        Loca: {
          version: '2.0',
        }
      })
        .then((AMap) => {
          that.map = new AMap.Map('container', {
            pitch: 40,
            rotation: 0,
            zoom: that.zoom, // 级别
            center: that.center, // 中心点坐标
            layers: [
              // 卫星
              // new AMap.TileLayer.Satellite(),
              // 路网
              // new AMap.TileLayer.RoadNet()
            ],
            mapStyle: 'amap://styles/fresh', //设置地图的显示样式
            viewMode: '3D', // 设置地图模式
            buildingAnimation: true, // 楼块出现是否带动画
            expandZoomRange: true
          })

          // that.loca = window.loca = new Loca.Container({
          //   map: that.map,
          // });

          this.map.addControl(new AMap.ControlBar({
            showZoomBar: false,
            showControlButton: true,
            position:{
              right: '36%',
              top: '15%'
            }
          }))
          // console.log("子组件地图", that.map)
          that.$emit('mapLoad', that.map)
          that.$emit('zoom', that.zoom)
          that.$emit('center', that.center)
          

          // that.loca.viewControl.addAnimates([{
          //   center: {
          //       value: that.center, // 动画终点的经纬度
          //       control: [POSITION.hanyu, that.center], // 过渡中的轨迹控制点，地图上的经纬度
          //       timing: [0.42, 0, 0.4, 1], // 动画时间控制点
          //       duration: 2000, // 过渡时间，毫秒（ms）
          //   },
          //   // 俯仰角动画
          //   pitch: {
          //       value: 45, // 动画终点的俯仰角度
          //       control: [[0.3, 20], [0.4, 40]], // 控制器，x是0～1的起始区间，y是pitch值
          //       timing: [0, 0, 1, 1], // 这个值是线性过渡
          //       duration: 5000,
          //   },
          //   // 缩放等级动画
          //   zoom: {
          //       value: 17, // 动画终点的地图缩放等级
          //       control: [[0.4, 18], [0.6, 17]], // 控制器，x是0～1的起始区间，y是zoom值
          //       timing: [0.42, 0, 0.4, 1],
          //       duration: 5000,
          //   },
          //   // 旋转动画
          //   rotation: {
          //       value: 120, // 动画终点的地图旋转角度
          //       control: [[0.4, 30], [0.6, 120]], // 控制器，x是0～1的起始区间，y是rotation值
          //       timing: [0.42, 0, 0.4, 1],
          //       duration: 10000,
          //   }
          // }],()=>{})

        })
        .catch((e) => {
          console.log(e)
        })
    },
    
  },
}
</script>
<style scoped>
#container {
  width: 100%;
  height: 100vh;
  padding: 0px;
  margin: 0px;
}
</style>
